<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>输入框组 | 表单</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input_group.css">

    <link rel="stylesheet" href="../../assets/dest/css/basic_icon.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_checkbox.css?20180418">
	<link rel="stylesheet" href="../../assets/dest/css/form_button.css?20180426">
	<link rel="stylesheet" href="../../assets/dest/css/form_button_group.css?20180427">
	<link rel="stylesheet" href="../../assets/dest/css/util_text.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">

	<style>
		.c-input-group {width: 300px;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>输入框组</dd>
			<dt>描述：</dt>
			<dd>用于组织多种表单元素，通过相互配合，增强UI效果。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>form_input.css</code>
				<code>form_input_group.css</code>
			</dd>
			<dt>可搭配资源（不限于）：</dt>
			<dd>
				<code>basic_icon.css</code>
				<code>form_checkbox.css</code>
				<code>form_button.css</code>
				<code>form_button_group.css</code>
				<code>util_text.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<h4>前置文本：</h4>
		<div class="c-input-group">
			<span class="o-input-addon">用户名</span>
			<input class="o-input" type="text" placeholder="中英文、数字、下划线">
		</div>
		<hr>
		<h4>后置文本：</h4>
		<div class="c-input-group">
			<input class="o-input" type="text" placeholder="请输入Email地址">
			<span class="o-input-addon">@qq.com</span>
		</div>
		<hr>
		<h4>前、后置文本：</h4>
		<div class="c-input-group">
			<span class="o-input-addon">&yen;</span>
			<input class="o-input" type="text" value="1,000">
			<span class="o-input-addon">万元</span>
		</div>
		<hr>
		<h4>使用 textarea：</h4>
		<div class="c-input-group">
			<span class="o-input-addon">备注</span>
			<textarea class="o-input" rows="6">该管理员帐号用于日常演示使用，已分配来宾权限，勿删！</textarea>
		</div>
		<hr>
		<h4>与图标搭配<small>（需 basic_icon.css）</small>：</h4>
		<div class="c-input-group">
			<span class="o-input-addon">
				<i class="icon-user"></i>
			</span>
			<input class="o-input" type="text" placeholder="用户名">
		</div>
		<div class="c-input-group" style="margin-top:10px">
			<input class="o-input" type="text" value="后置的图标哦">
			<span class="o-input-addon">
				<i class="icon-location"></i>
			</span>
		</div>
		<hr>
		<h4>有颜色的图标<small>（建议搭配 util_text.css）</small>：</h4>
		<div class="c-input-group">
			<input class="o-input" type="text" value="1+1=2">
			<span class="o-input-addon">
				<i class="icon-check-circle u-text-success"></i>
			</span>
		</div>
		<div class="c-input-group" style="margin-top:10px">
			<span class="o-input-addon">
				<i class="icon-map-pin u-text-danger"></i>
			</span>
			<input class="o-input" type="text" value="广东省东莞市松山湖">
		</div>
		<hr>
		<h4>与选项框搭配<small>（需 form_checkbox.css）</small>：</h4>
		<div class="c-input-group">
			<span class="o-input-addon">
				<label class="o-checkbox">
					<input type="checkbox">
					<span class="o-label-text">办公电话</span>
				</label>
			</span>
			<input class="o-input" type="text">
		</div>
		<div style="margin-top:10px">
			<div class="c-input-group" style="float:left;margin-right:10px">
				<span class="o-input-addon">
					<label class="o-radio">
						<input type="radio" name="radio" checked>
						<span class="o-label-text"></span>
					</label>
				</span>
				<input class="o-input" type="text">
			</div>
			<div class="c-input-group">
				<span class="o-input-addon">
					<label class="o-radio">
						<input type="radio" name="radio">
						<span class="o-label-text"></span>
					</label>
				</span>
				<input class="o-input" type="text">
			</div>
		</div>
		<hr>
		<h4>与按钮搭配<small>（需 form_button.css、form_button_group.css）</small>：</h4>
		<div class="c-input-group">
			<span class="c-btn-group">
				<button class="o-btn o-btn-normal">
					<i class="icon-at-sign u-text-info"></i>
				</button>
			</span>
			<input class="o-input" type="text" value="Wing Meng">
		</div>
		<hr>
		<div class="c-input-group">
			<input class="o-input" type="text" placeholder="请输入用户手机号">
			<span class="c-btn-group">
				<button class="o-btn o-btn-success">
					<i class="icon-search"></i>
					<span>搜索</span>
				</button>
			</span>
		</div>
		<div class="c-input-group" style="margin-top:10px">
			<input class="o-input input-sm" type="text" placeholder="请输入用户手机号">
			<span class="c-btn-group">
				<button class="o-btn o-btn-success btn-sm">
					<i class="icon-search"></i>
					<span>搜索</span>
				</button>
			</span>
		</div>
		<hr>
		<div class="c-input-group">
			<span class="c-btn-group">
				<button class="o-btn o-btn-primary">
					<i class="icon-arrow-left"></i>
				</button>
			</span>
			<input class="o-input" type="text" value="2018-02-02（腊月十七）">
			<span class="c-btn-group">
				<button class="o-btn o-btn-primary">
					<i class="icon-arrow-right"></i>
				</button>
			</span>
		</div>
		<hr>
		<div class="c-input-group">
			<input class="o-input" type="text" placeholder="请输入内容">
			<span class="c-btn-group">
				<button class="o-btn o-btn-normal">
					<i class="icon-align-left"></i>
				</button>
				<button class="o-btn o-btn-normal">
					<i class="icon-align-center"></i>
				</button>
				<button class="o-btn o-btn-normal">
					<i class="icon-align-right"></i>
				</button>
			</span>
		</div>
		<hr>
		<h4>尺寸测试： <small>(注：不适用超小文本框，因为没有类似的使用场景，故不支持)</small></h4>
		<div class="c-input-group">
			<span class="o-input-addon">
				<strong>1</strong>
			</span>
			<input class="o-input input-lg" type="text" placeholder="大文本框">
		</div>
		<hr>
		<div class="c-input-group">
			<span class="o-input-addon">
				<strong>2</strong>
			</span>
			<input class="o-input" type="text" placeholder="中文本框">
		</div>
		<hr>
		<div class="c-input-group">
			<span class="o-input-addon">
				<strong>3</strong>
			</span>
			<input class="o-input input-sm" type="text" placeholder="小文本框">
		</div>
	</div>
</body>
</html>
